<template>
    <div>
        <wd-header title="已订阅记忆法课程">
            <span class="iconfont" @click="goback" slot="left">&#xe697;</span>
        </wd-header>
        <div class="videoContainer fadeIn" v-if="datas">
            <!-- <transition-group enter-active-class="animated fadeIn"> -->
                <router-link tag="div" class="oneOf" v-for="(item ,index) in datas" :key="index" :to="{ name:'myvideolist',
                              params:{
                                  lessonid:item.memoryId,
                                  imgurl:item.imgUrl,
                                  title:item.title,
                                  content:item.content,
                                  payid:item.memoryId
                              }
                }">
                    <p>{{item.title}}</p>
                    <img :src="item.imgUrl" alt="加载中…">
                    <div>
                        <span>共{{item.total_lessons}}课程</span>
                        <span>{{(item.orders/10000).toFixed(1)}}万次订阅</span>
                    </div>
                </router-link>
            <!-- </transition-group> -->
        </div>
    </div>
</template>
<script>
export default {
    name: 'myvideo',
    data() {
        return {
            datas: [],
            auth: JSON.parse(localStorage.user),
            url: 'http://www.jydsapp.com/jydsApi/api/h5/video/getMemoryVideo',
            pageIndex: 1
        }
    },
    created() {
        this.getData()
    },
    beforeRouteLeave(to, from, next) {
        let routeinfo = { // 保存已购买视频到列表页的数据
            lessonid: to.params.lessonid
        }
        this.$store.commit('saveMyVideoData', routeinfo)
        next()
    },
    methods: {
        goback() {
            this.$router.go(-1)
        },
        getData() {
            let str = `{"userPhone":"${this.auth.user.phoneNum}","token":"${this.auth.token}","pageIndex":${this.pageIndex},"type":0}`
            let toast = this.$Toast({
                content: '加载中…',
                iconClass: 'loader',
                autoClose:false
            })
            this.fetch({
                method: 'post',
                url: this.url,
                params: {
                    "paramStr": str
                }
            }).then((response) => {
                let res = response.data
                if (res.code == 200) {
                    toast.close()
                    this.datas = JSON.parse(res.data).indexMemory
                } else if (res.code == 103) { //五天内未登录 token失效跳转到登陆页面
                    toast.close()
                    localStorage.removeItem('user')
                    this.$Toast({
                        content: '请重新登录'
                    })
                    this.$router.replace('/login')
                } else {
                    toast.close()
                    this.$Toast({
                        content: res.message,
                    })
                }
            }).catch((err) => {

            })
        }
    }
}
</script>
<style lang="scss" scoped>
.oneOf {
    position: relative;
    background: #eee;
    margin-bottom: 0.555556rem;
    p {
        position: absolute;
        color: #fff;
        top: 0.277778rem;
        left: 0.277778rem;
    }
    img {
        width: 100%;
    }
    div {
        display: flex;
        justify-content: space-between;
        padding: 0.277778rem 0.37037rem;
        // background: #eee;
        color: #555;
    }
}
</style>
